<template>
    <orh-table add="add" pages :pageDate="pageDate"
               @on-add="addSilde" @on-page-change="queryData"
               del="del" @on-del="confirm"
               reload @on-reload="refresh">


        <Table :columns="columns1" @on-selection-change="selectOne" :loading="tableload" :data="datalist"
               slot="table"></Table>

        <orh-sidebar v-model="show" :title="pageTitle" scale slot="others">
            <component :is="'Operation'" :infoId="infoId" @showParent="showParent=>show=showParent"
                       @backList="backList"></component>
        </orh-sidebar>
    </orh-table>
</template>
<script>
    export default {
        name: 'classroommanagement-teacherattendancerules',
        components: {
            Operation: () => import("./Operation.vue").then(m => m.default || m),
        },
        data() {
            return {
                listUrl: 'api/watchlist/v1/admininspecttermrules/list?page=',
                delUrl: 'api/watchlist/v1/admininspecttermrules/del/',

                pageDate: {
                    total: 0,
                    current_page: 1,
                    per_page: 10
                },


                pageTitle: '',//右边页面的title
                tableload: true,//表格加载动画

                del: [],//删除
                show: false,

                datalist: [],//年级变量
                infoId: null,//用于向修改页面传id值
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '类型',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            let state = params.row.classification
                            if (state == '1') {
                                return h('div', {
                                    style: {
                                        color: '#19be6b'
                                    }
                                }, '加分');
                            }
                            if (state == '2') {
                                return h('div', {
                                    style: {
                                        color: '#ed3f14'
                                    }
                                }, '减分');
                            }
                        }
                    },
                    {
                        title: '状态',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            let state = params.row.type
                            if (state == '1') {
                                return h('div', {
                                    style: {
                                        color: '#19be6b'
                                    }
                                }, '迟到');
                            }
                            if (state == '2') {
                                return h('div', {
                                    style: {
                                        color: '#ed3f14'
                                    }
                                }, '旷工');
                            }
                        }
                    },
                    {
                        title: '分数',
                        width: 150,
                        align: 'center',
                        key: 'fixed_score',
                    },
                    {
                        title: '备注',
                        width: 200,
                        render: (h, params) => {
                            return h('span', params.row.remarks ? params.row.remarks.zh ? params.row.remarks.zh : params.row.remarks.mn : '')
                        },
                    },
                    {
                        title: '  ',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'edit',
                                        }
                                    ],
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.row.watchlist_rules_id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.del = [params.row.watchlist_rules_id]
                                            this.confirm()
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
            }
        },
        methods: {
            /************************************************************
             *
             * 请求列表数据
             *
             ************************************************************/
            queryData(index = 1) {
                this.tableload = true
                this.$http.get(`${this.listUrl}${index}`).then(val => {
                    this.datalist = val.data
                    if (val.pages) {
                        this.pageDate.total = val.pages.total
                        this.pageDate.per_page = val.pages.per_page
                        this.pageDate.current_page = val.pages.current_page
                    }
                    this.tableload = false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.tableload = false
                });
            },

            /************************************************************
             *
             * 点击添加
             *
             ************************************************************/
            addSilde() {
                this.show = true
                this.infoId = false
                this.pageTitle = '添加'
            },

            /************************************************************
             *
             * 点击编辑
             *
             ************************************************************/
            update(index) {
                this.infoId = index
                this.show = true
                this.pageTitle = '修改'

            },

            /************************************************************
             *
             * 修改添加返回数据更新
             *
             ************************************************************/
            backList(val) {
                if (val == true) {
                    this.queryData(this.pageDate.current_page);
                }
            },

            /************************************************************
             *
             * 批量删除
             *
             ************************************************************/
            selectOne(index) {
                this.del = index.map(item => item.watchlist_rules_id)
            },

            /************************************************************
             *
             * 执行删除操作
             *
             ************************************************************/
            confirm() {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>您确定要删除这些数据吗?</p>',
                    onOk: () => {
                        if (this.del.length == 0) {
                            this.$Message.error('请选择删除项');
                            return
                        }
                        this.del = JSON.stringify(this.del)
                        this.tableload = true
                        this.$http.delete(`${this.delUrl}${this.del}`)
                            .then(val => {
                                this.del = []
                                this.queryData(this.pageDate.current_page)
                                this.$Message.success(val.message);
                            })
                            .catch(err => {
                                if (err.code && err.code == 422) {
                                    this.$Message.error(err.message);
                                }
                                this.del = []
                                this.tableload = false
                            })
                    },
                });
            },

            /************************************************************
             *
             * 刷新数据（当前分页）
             *
             ************************************************************/
            refresh() {
                this.queryData(this.pageDate.current_page)
            },


        },
        mounted() {
            this.queryData();
        },
    }
</script>
